<template>
  <div class="dateTime">
    <div class="date">
      <div class="day">{{ formatDay() }}</div>
      <div class="month-year">
        <div class="month">{{ formatMonth() }}</div>
        <div class="year">{{ formatYear() }}</div>
      </div>
      <div class="time">{{ formatTime() }}</div>
    </div>
  </div>
  <br>
</template>

<script setup>
import {onMounted, ref} from "vue";

const monthEnglish = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Spt", "Oct", "Nov", "Dec"]
const time = ref(new Date())

onMounted(() => {
  refreshDate()
})

function refreshDate() {
  setInterval(() => {
    time.value = new Date()
  }, 1000)
}

function formatYear() {
  return time.value.getFullYear()
}

function formatMonth() {
  return monthEnglish[time.value.getMonth()]
}

function formatDay() {
  return time.value.getDate()
}

function formatTime() {
  return time.value.toLocaleTimeString()
}

</script>

<style scoped>
.dateTime {
  position: fixed;
  left: 0;
  top: 0;
  padding: 2rem
}

.date {
  display: flex;
  justify-content: space-between;
}

.day {
  font-size: xx-large;
  font-weight: bold;
  margin-top: -5px;
}

.month-year {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 10px;
}

.year, .month {
  font-size: small;
}

.time {
  font-size: 18px;
  margin-left: 10px;
  margin-top: 5px;
}
</style>